<template>
    <div>
        <custom-table
            ref="ruleTableRef"
            :rules="tableRules"
            class="margin-t-16 release-version-table"
            size="small"
            rowKey="jiraId"
            :pagination="false"
            :columns="columns"
            :data-source="newList"
            :locale="locale"
            v-if="detail.dataSource === '外部'"
        >
            <template #requireTitle="{ record }">
                <a-tooltip v-if="disabled" :title="record.requireTitle">
                    <span>{{ record.requireTitle }}</span>
                </a-tooltip>
                <a-input :maxlength="100" allow-clear v-model:value="record.requireTitle" v-else />
            </template>
            <template #versionNumber="{ record }">
                {{ record.versionNumber }}
            </template>
            <template #jiraId="{ record }">
                {{ record.jiraId ? 'JIRA' : '' }}
            </template>
            <template #planRequires="{ record }">
                <flexbox v-if="disabled">
                    <span v-if="record.planRequires || record.planRequires == 0">{{ record.planRequires }}</span>
                    <a-tag color="red" v-else>未填报</a-tag>
                </flexbox>
                <a-input-number :min="0" v-model:value="record.planRequires" v-else />
            </template>
            <template #onlineRequires="{ record }">
                <flexbox v-if="disabled">
                    <span v-if="record.onlineRequires || record.onlineRequires == 0">{{ record.onlineRequires }}</span>
                    <a-tag color="red" v-else>未填报</a-tag>
                </flexbox>
                <a-input-number :min="0" v-model:value="record.onlineRequires" v-else />
            </template>
            <template #comPercent="{ record }">
                <flexbox>
                    <CheckCircleFilled style="color: #26a971" v-if="~~((record.onlineRequires / record.planRequires) * 100) === 100" />
                    <ClockCircleFilled style="color: #0176d3" v-else />
                    <span class="margin-l-8"> {{ record.planRequires ? ~~((record.onlineRequires / record.planRequires) * 100) + '%' : 0 }}</span>
                </flexbox>
            </template>
            <template #planOnlineTime="{ record }">
                <flexbox v-if="disabled">
                    <span v-if="record.planOnlineTime">{{ $filters.dateFilter(record.planOnlineTime) }}</span>
                    <a-tag color="red" v-else>未填报</a-tag>
                </flexbox>
                <h-date-picker-cell v-model:value="record.planOnlineTime" :disabledDate="false" v-else />
            </template>
            <template #realOnlineTime="{ record }">
                <flexbox>
                    <flexbox>
                        <span v-if="record.realOnlineTime">{{ $filters.dateFilter(record.realOnlineTime) }}</span>
                        <a-tag color="red" v-else>未填报</a-tag>
                    </flexbox>
                </flexbox>
            </template>
            <template #onlineStatus="{ record }">
                <a-tag color="red" v-if="record.onlineStatus === '2'">延期</a-tag>
                <a-tag color="blue" v-if="record.onlineStatus === '1'">正常</a-tag>
            </template>
        </custom-table>

        <custom-table
            ref="ruleTableRef"
            :scroll="{ x: 1200 }"
            :rules="tableRules"
            class="margin-t-16 release-version-table"
            size="small"
            rowKey="id"
            :pagination="false"
            :columns="columns"
            :data-source="newList"
            v-else
        >
            <template #requireTitle="{ record }">
                <a-tooltip placement="topLeft" v-if="disabled" :title="record.requireTitle">
                    <span>{{ record.requireTitle }}</span>
                </a-tooltip>
                <a-input :maxlength="100" allow-clear v-model:value="record.requireTitle" v-else />
            </template>
            <template #energyManage="{ record }">
                <router-link :to="{ path: '/energyManage/versionReportHistory/detail', query: { id: record.requireId } }">详情</router-link>
            </template>
            <template #versionNumber="{ record }">
                <router-link :to="{ path: '/version/versionDetail', query: { id: record.requireId } }">{{ record.versionNumber }}</router-link>
            </template>
            <template #comPercent="{ record }">
                <flexbox>
                    <CheckCircleFilled style="color: #26a971" v-if="~~((record.onlineRequires / record.planRequires) * 100) === 100" />
                    <ClockCircleFilled style="color: #0176d3" v-else />
                    <span class="margin-l-8">
                        {{ record.planRequires ? ~~((record.onlineRequires / record.planRequires) * 100) + '%' : 0 }}
                    </span>
                </flexbox>
            </template>
            <template #planRequires="{ record }">
                <a @click="jumpTo(1, record.planRequireIds)" v-if="record.planRequires">{{ record.planRequires }}</a>
                <span v-else>{{ record.planRequires }}</span>
            </template>
            <template #onlineRequires="{ record }">
                <a @click="jumpTo(2, record.onlineRequireIds)" v-if="record.onlineRequires">{{ record.onlineRequires }}</a>
                <span v-else>{{ record.onlineRequires }}</span>
            </template>
            <template #planOnlineTime="{ record }">
                <span>{{ $filters.dateFilter(record.planOnlineTime) }}</span>
            </template>
            <template #onlineStatus="{ record }">
                <a-tag color="red" v-if="record.onlineStatus === '2'">延期</a-tag>
                <a-tag color="blue" v-if="record.onlineStatus === '1'">正常</a-tag>
            </template>
            <template #realOnlineTime="{ record }">
                <span v-if="record.onlineStatus === '1'">{{ $filters.dateFilter(record.planOnlineTime) }}</span>
                <span v-if="record.onlineStatus === '2'">{{ $filters.dateFilter(record.realOnlineTime) }}</span>
            </template>
        </custom-table>
    </div>
</template>

<script lang="tsx">
import { useRouter } from 'vue-router';
import { PlusCircleOutlined, MinusCircleOutlined, CheckCircleFilled, ClockCircleFilled} from '@ant-design/icons-vue';
import { detailColumns } from '@/views/energyManage/analysisReport/config/detailColumns';
import { CustomTable, HDatePickerCell } from '@/components';
import { defineComponent, ref, unref, reactive, toRefs, computed, watch } from 'vue';
export default defineComponent({
    components: {
        CustomTable,
        HDatePickerCell,
        PlusCircleOutlined,
        MinusCircleOutlined,
        CheckCircleFilled,
        ClockCircleFilled
    },
    props: {
        list: {
            type: Array,
            default: () => []
        },
        detail: {
            type: Object,
            default: () => ({})
        },
        hasAuth: {
            type: Boolean,
            default: false
        },
        parentCatalogCode: {
            type: String,
            default: ''
        }
    },
    setup(props) {
        const { columnsB, columnsG } = detailColumns;
        const router = useRouter();
        const ruleTableRef = ref<any>();
        // 表格规则
        const tableRules = {
            requireTitle: [{ required: true, message: '版本概述不能为空' }]
        };
        const state = reactive<any>({
            newList: [],
            locale: { emptyText: () => <a-empty description="未填报" /> }
        });
        const disabled = computed(() => {
            return +props.detail.stage > 2 || !props.hasAuth;
        });
        const columns = computed(() => {
            if (props.detail.dataSource === '外部' && props.detail.pmpProductDetailDTO.projectKey) {
                columnsG[columnsG.length - 1].width = 120;
                return [
                    ...columnsG
                ];
            } else {
                columnsB[columnsB.length - 1].width = unref(disabled) ? 120 : 350;
                const columns = props.detail.dataSource === '外部' ? [...columnsB] : [...columnsB, {
                    title:'版本能效',
                    dataIndex:'energyManage',
                    width:100,
                    slots: { customRender: 'energyManage' }
                }];
                if (props.parentCatalogCode === '2202303080042') {
                    return [{
                        title:'子平台',
                        dataIndex:'systemName',
                        width:100
                    }, ...columns];
                } else {
                    return columns;
                }
            }
        });
        const jumpTo = (type, ids) => {
            router.push({
                path: '/energyManage/analysisReport/proList',
                query: {
                    ids,
                    type,
                    systemName: props.detail.systemName
                }
            });
        };
        watch(
            () => props.list,
            (n) => {
                state.newList = [...n];
            },
            {
                immediate: true
            }
        );
        return {
            columns,
            ruleTableRef,
            tableRules,
            disabled,
            ...toRefs(state),
            jumpTo
        };
    }
});
</script>

<style scoped>
</style>